<template>
    <div>
        <Modal v-model="show" title="添加角色"
               :mask-closable="false" :closable="false">
            <Form ref="modalForm" :model="data"
                  :label-width="100" :rules="rules">
                <FormItem label="角色编码" prop="roleCode">
                    <Input v-model.trim="data.roleCode" placeholder="角色编码" @on-change="toUppercase()"/>
                </FormItem>
                <FormItem label="角色名 " prop="roleName">
                    <Input v-model.trim="data.roleName" placeholder="角色名称"/>
                </FormItem>
                <FormItem label="角色描述" prop="roleDesc">
                    <Input v-model.trim="data.roleDesc" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                           placeholder="角色描述"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" :disabled="loading" @click="cancel(false)">取消</Button>
                <Button type="primary" :loading="loading" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import {mapActions} from 'vuex';

    export default {
        data() {
            return {
                loading: false,
                show: true,
                data: {
                    roleCode: '',
                    roleName: '',
                    roleDesc: ''
                },
                rules: {
                    roleCode: [
                        {required: true, message: '角色编码不能为空', trigger: 'blur'},
                        {
                            type: 'string',
                            min: 3,
                            max: 10,
                            pattern: /^[A-Z]\w{2,9}$/,
                            message: '角色编码输入错误,必须是3到10位大写字母',
                            trigger: 'blur'
                        }
                    ],
                    roleName: [
                        {required: true, message: '角色名不能为空', trigger: 'blur'},
                        {type: 'string', max: 10, message: '角色名输入错误,长度不能超过10位', trigger: 'blur'}
                    ],
                    roleDesc: [
                        {type: 'string', max: 150, message: '描述输入错误,长度不能超过150位', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            ...mapActions(['addRole']),
            toUppercase() {
                this.data.roleCode = this.data.roleCode.toUpperCase();
            },
            handleRoleAdd() {
                this.loading = true;
                this.$refs['modalForm'].validate(valid => {
                    if (valid) {
                        this.addRole({
                            roleCode: this.data.roleCode,
                            roleName: this.data.roleName,
                            roleDesc: this.data.roleDesc
                        }).then(res => {
                            if (res.code === '0000') {
                                this.$Message.success('角色 ' + this.data.roleName + ' 添加成功');
                                this.cancel(true);
                                this.loading = false;
                            } else {
                                this.$Message.error(this.$t('addDataFailed'));
                                this.loading = false;
                            }
                        });
                    } else {
                        this.loading = false;
                    }
                });
            },
            cancel(reload = false) {
                this.$emit('cancel', 'add', reload);
            },
            ok() {
                this.handleRoleAdd();
            }
        }
    };
</script>